<template>
    <div class="common-layout">
        <el-container>
            <el-aside width="200px"
                style="border: 1px #ccc solid;margin-left: 10px; width: 300px;height: 400px;padding-top: 20px;padding-left: 10px;">
                角色列表，从角色表中动态查询：
                <el-input v-model="filterText" class="w-60 mb-2" placeholder="请选择角色" />
                <el-tree ref="treeRef" style="max-width: 600px" class="filter-tree" :data="data" :props="defaultProps"
                    default-expand-all :filter-node-method="filterNode" @node-click="nodeclick" />
            </el-aside>
            <el-main width="200px" style="border: 1px #ccc solid;margin-left: 10px;">
                菜单列表，从菜单表中动态查询，注意层级关系:
                <el-input v-model="filterText1" class="w-60 mb-2" placeholder="请选择菜单" />
                <el-tree ref="treeRef1" style="max-width: 600px" show-checkbox node-key="id" :data="menudata" :props="defaultProps1"
                    :default-expanded-keys="[2, 3, 5, 7]" />
                <button @click="AddRoleMenu()">保存</button>
            </el-main>

        </el-container>

    </div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from 'vue'
import { ElMessage, ElTree, type FilterNodeMethodFunction, type TreeInstance } from 'element-plus'
import axios from 'axios'
import https from '../../http/AxiosHelper';
onMounted(() => {
    getroleid();
    getRoleTree();
    getMenuTree();
    
})
//树形
interface Tree {
    [key: string]: any
}
const filterText = ref('')
const treeRef = ref<TreeInstance>()
const filterText1 = ref('')
const treeRef1 = ref<InstanceType<typeof ElTree>>()
watch(filterText, (val) => {
    treeRef.value!.filter(val)
})
watch(filterText, (val) => {
    treeRef.value!.filter(val)
})
const filterNode: FilterNodeMethodFunction = (value: string, data: Tree) => {
    if (!value) return true
    return data.label.includes(value)
}
//角色树形
const data = ref([])
const defaultProps:any = {
    children: 'children',
    label: 'roleName',
    id: "id"
}
const getRoleTree = () => {
    https.get("api/Role/ShowRole").then(res => {
        data.value = res.data.data
    })
}
//菜单树形
const defaultProps1 = {
    children: 'children',
    label: 'menuName',
    id: "id"
}
const menudata = ref<any>([])
const getMenuTree = () => {
    https.get("api/Menu/GetMenuTree").then(res => {
        menudata.value = res.data.data
    })
}

//保存按钮
const getRoleMenu: any = ref({
    "roleId": 0,
    "menuId": []
    // username: [] as { id: number, userName: string }[]
})
const nodeclick = (x: any) => {
    getRoleMenu.value.roleId = x.id;
    console.log(getRoleMenu.value.roleId); // 调试输出
    fentian();
}
const AddRoleMenu = () => {
    getRoleMenu.value.menuId=treeRef1.value?.getCheckedKeys(false);
    console.log(getRoleMenu.value.menuId); // 调试输出
    https.post("api/RoleMenu/AddRoleMenu", getRoleMenu.value).then(res => {
        if (res.data.code == 200) {
            ElMessage.success(res.data.msg);
            getRoleTree();
            getMenuTree();
        }
        else {
            ElMessage.error(res.data.msg);
        }
    })
}
//反填
const fentian=()=>{
    https.get("api/RoleMenu/GetRoleMenu",{params:{RoleId:getRoleMenu.value.roleId}}).then(res=>{
        treeRef1.value?.setCheckedKeys(res.data.data,true)
    })
}
//获取角色id
const getroleid=()=>{
defaultProps.id=localStorage.getItem("roleId");
console.log(defaultProps.id);

}

</script>